<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar :title="vuex_table_title || '新闻资讯'"  :border-bottom="false"></fa-navbar>
		<view class="u-p-20 u-bg-white" ><u-search placeholder="请输入关键词搜索" v-model="keyword" @search="search" :focus="true"></u-search></view>
		<!-- <view class="u-p-20 u-bg-white u-flex u-col-center" v-if="is_show">
			<view class="u-flex-1"><fa-search :mode="2"></fa-search></view>
			<view class="u-p-l-15 u-p-r-5 u-flex u-col-center" v-if="is_order">
				<fa-orderby-select :filterList="filterList" :orderList="orderList" :multiple="true" @change="goOrderBy"></fa-orderby-select>
			</view>

		</view> -->
		<!-- 分类 -->
<!-- 		<view class="u-border-top" v-if="isTab">
			#ifdef MP-BAIDU
			<fa-u-tabs
				:list="tabList"
				:active-color="theme.bgColor"
				:bar-width="tabwidth"
				name="title"
				:is-scroll="true"
				:current="current"
				@change="change"
			></fa-u-tabs>
			#endif
			#ifndef MP-BAIDU
			<u-tabs :list="tabList" :active-color="theme.bgColor" :bar-width="tabwidth" name="title" :is-scroll="true" :current="current" @change="change"></u-tabs>
			#endif
		</view> -->
		<!-- <view class="message_image"> -->
			<!-- <image src="../../static/image/message.png"  mode="" class="img"></image> -->
		<u-image v-if="is_empty" width="350rpx" border-radius="6" height="350rpx" :src="image"></u-image>
		<!-- </view> -->
		<!-- 列表 -->
		<view class="message"  v-for="(item, index) in activityList" :key="index"
			@click="goDetail(item)">
			<view :class="isEnter?'read':'unRead'">
				
			</view>
			<view class="message_title">
				<view class="message_text">
					{{item.title}}
				</view>
				<view class="message_time">
					<u-icon name="clock" class='message_icon'></u-icon>
					{{item.show_date}}
				</view>
			</view>
		</view>
		<!-- <fa-article-item :archives-list="archivesList"></fa-article-item> -->
		<!-- 加载更多 -->
		<view class="u-p-30 txtcolor" v-if="activityList.length"><u-loadmore bg-color="#f4f6f8" :status="status" /></view>
		<!-- 为空 -->
		<!-- <view class="u-m-t-60 u-p-t-60" v-if="is_empty"><u-empty text="暂无内容展示" mode="list"></u-empty></view> -->
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }" :custom-style="{ backgroundColor: lightColor }"></u-back-top>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
export default {
	computed: {
		is_order() {
			return this.filterList.length > 0 || this.orderList.length > 0;
		}
	},
	data() {
		return {
			tabwidth: 40,
			current: 0,
			status: 'nomore',
			page: 1,
			channel_id: 0,
			filterList: [],
			orderList: [],
			archivesList: [],
			is_show: false,
			has_more: false,
			scrollTop: 0,
			is_update: false,
			params: {},
			query: {},
			isTab: false,
			tabList: [],
			is_empty: false,
			channel:{},
			isEnter: false,
			ing: 0,
			end: 0,
			activityList: [],
			keyword: '',
			image:this.$image_url+"/uploads/uniapp/image/message.png",
			
		};
	},
	onLoad(e) {
		//模型id
		let query = e;
		if(query.keyword){
			this.keyword = query.keyword
		}
		if (JSON.stringify(query) == '{}') {
			query = e;
		}
		if (query && JSON.stringify(query) != '{}') {
			this.params = {
				is_read: 0,
			};
		} else {
			this.params = {
				is_read: 0,
			};
		}

	},
	onShow() {

	  console.log(this.keyword);
		this.page = 1;
		this.activityList = [];
		this.getList();
		// #ifdef MP-BAIDU
		if(this.channel){
			this.setPagesInfo();
		}
		// #endif
	},
	methods: {
    search(){
      this.page = 1;
      this.activityList = [];
      this.getList();
    },
		change(index) {
			//重设Bar宽度s
			this.tabwidth = this.$util.strlen(this.tabList[index].title) * 30;
			this.current = index;
			this.channel_id = this.tabList[index].id;
			this.is_update = true;
			this.page = 1;
			this.getArchives();
		},
		goOrderBy(e) {
			this.page = 1;
			this.is_update = true;
			this.query = e;
			this.getArchives();
		},
		noRead(){
			if(this.isEnter){
				this.isEnter = false
				this.page = 1
				this.activityList = []
				this.getList()
			}
		},
		isRead(){
			if(!this.isEnter){
				this.isEnter = true
				this.page = 1
				this.activityList = []
				this.getList()
			}
		},
		getArchives: async function() {
			let data = {
				page: this.page,
				...this.params,
				...this.query
			};
			if (this.channel_id) {
				data.channel = this.channel_id;
			}
			console.log(data)
			let res = await this.$api.getArchives(data);
			this.status = 'nomore';
			uni.stopPullDownRefresh();
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			let { filterList, orderList, pageList, channel } = res.data;
			this.filterList = filterList;
			this.orderList = orderList;
			this.channel = channel;
			// #ifdef MP-BAIDU
			if(this.channel){
				this.setPagesInfo();
			}
			// #endif
			if (this.is_update) {
				this.archivesList = [];
				this.is_update = false;
			}
			this.is_show = true;
			this.has_more = pageList.current_page < pageList.last_page;
			this.archivesList = [...this.archivesList, ...pageList.data];
			this.is_empty = !this.archivesList.length;
		},
		// #ifdef MP-BAIDU
		setPagesInfo() {
			swan.setPageInfo({
				title:this.channel.seotitle,
				keywords: this.channel.keywords,
				description:this.channel.description,
				releaseDate: this.$u.timeFormat(this.channel.createtime, 'yyyy-mm-dd hh:MM:ss'),
				image: this.channel.image,
				success: res => {
					console.log('setPageInfo success', res);
				},
				fail: err => {
					console.log('setPageInfo fail', err);
				}
			});
		},
		// #endif
		getCategory() {
			this.$api.getCategory({ ...this.params }).then(res => {
				console.log('百度小程序要先有值')
				if (res.code == 1) {
					this.tabList = res.data;
					this.isTab = true; //百度小程序要先有值
				} else {
					this.$u.toast(res.msg);
				}
			});
		},
		getList: async function() {
			if(this.isEnter){
				var data  = {
					type: 2,
					page: this.page,
					per_page: 20,
					keyword: this.keyword
				}
			}else{
				var data  = {
					type: 1,
					page: this.page,
					per_page: 20,
					keyword: this.keyword
				}
			}
			let res = await this.$api.getArchives(data);
			this.status = 'nomore';
			uni.stopPullDownRefresh();
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			console.log('站内信列表',res.data.pageList)

			let pageList = res.data.pageList;

			if (this.is_update) {
				this.activityList = [];
				this.is_update = false;
			}

			this.is_show = true;
			this.has_more = pageList.current_page < pageList.last_page;
			this.activityList = [...this.activityList, ...pageList.data];
			this.is_empty = !this.activityList.length;
		},
		goDetail(item) {
			console.log(item)
			this.$u.route('/pages/article/detail', {
				id: item.id
			});
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	//下拉刷新
	onPullDownRefresh() {
		this.is_update = true;
		this.page = 1;
		this.getList();
	},
	onReachBottom() {
		if (this.has_more) {
			this.status = 'loading';
			this.page = ++this.page;
			this.getList();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f4f6f8;
	.notice{
		width: 352rpx;
		height: 55rpx;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-around;
		// border: 1rpx solid #d9001b;
		margin: auto;
		margin-top: 30rpx;
		margin-bottom: 90rpx;
		font-size: 30rpx;
		color: #d9001b;
		.notice_item{
			display: flex;
			width: 100%;
			padding: 0 15rpx;
			justify-content: space-around;
			align-items: center;
			.readBg{
				width: 30rpx;
				height: 30rpx;
				background-color: #DD6161;
			}
		}
		.notice_enter {
			background-color: #d9001b;
			height: 55rpx;
			line-height: 55rpx;
			overflow: hidden;
			color: white;
		}
		.notice_no{
			border: 1rpx solid #d9001b;
			border-radius: 0  20rpx 20rpx 0;
		}
		.notice_mo {
			border: 1rpx solid #d9001b;
			border-radius: 20rpx 0 0 20rpx;
		}
		.notice_cot {
			width: 30rpx;
			height: 30rpx;
			line-height: 30rpx;
			text-align: center;
			margin-left: 10rpx;
			// margin-left: 10rpx;
			border-radius: 30rpx;
			color: #d9001b;
			background-color: white;
		}
	}
	.message{
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0 30rpx;
		.read,
		.unRead {
			width: 14rpx;
			height: 14rpx;
			border-radius: 14rpx;
			background-color: #c7c7c7;
		}
		.unRead {
			background-color: #d9001b;
		}
		.message_title {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
		}
		.message_text{
			width: 420rpx;
			font-size: 30rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.message_icon {
			margin: 10rpx;
		}
	}
	.u-image {
		margin-left: 25%;
	}
	.txtcolor {
	}
	.message_time{
		color: #B3B3B3;
		font-size: 24rpx;
	}
}
</style>
